<template>
  <div>
    <el-menu
      default-active="1"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      v-for="(item, idx) in rs"
    >
      <el-menu-item :index="item.path">
        <i v-if="item.icon" :class="item.icon"></i>
        <span v-if="item.meta">{{ item.meta.name }}</span>
      </el-menu-item>
      <el-submenu
        v-if="item.children && item.children.length > 0"
        :index="item.path"
      >
        <template v-slot:title="title">
          <i v-if="item.icon" :class="item.icon"></i>
          <span v-if="item.meta">{{ item.meta.name }}</span>
        </template>
        <el-menu-item
          v-for="(_item, _idx) in item.children"
          :index="_item.path"
        >
          <i v-if="_item.icon" :class="_item.icon"></i>
          <span v-if="_item.meta">{{ _item.meta.name }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import routes from "@/components/config/resources.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      rs: [],
    };
  },
  created() {
    this.getRoutes();
  },
  computed: {
    getRS() {
      this.getRoutes();
    },
  },
  methods: {
    getRoutes() {
      console.log("the routes: ", routes.routes);
      this.rs = routes.routes[0].children;
    },
  },
};
</script>
<style></style>
